<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./lib/vue.js"></script>
        <style>
            .class1 {
                height: 200px;
                background-color: pink;
            }
            .class2 {
                width: 300px;
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <input type="text" v-focus /><br />
            <input type="text" v-model="uname" /><br />
            <!-- <div v-color:class="{class1:true,class2:true}"></div> -->
            <div v-color="msg">12</div>
        </div>
        <script>
            Vue.directive('focus', {
                inserted: function(el) {
                    //获取元素的焦点
                    el.focus();
                }
            });
            Vue.directive('color', {
                bind: function(el, binding) {
                    console.log(el);
                    console.log(binding);
                    // for (var key in binding.value) {
                    //     if (binding.value[key]) {
                    //         el.className += ' ' + key;
                    //     }
                    // }
                    el.style.backgroundColor = binding.value.color;
                }
            });
            var app = new Vue({
                el: '#app',
                data: {
                    uname: '张三',
                    msg: {
                        color: 'orange'
                    }
                },
                directives: {
                    /* 自定义指令-局部指令 */
                    color: {
                        bind: function(el, binding) {
                            el.style.backgroundColor = binding.value.color;
                        }
                    },
                    focus: {
                        inserted: function(el) {
                            //获取元素的焦点
                            el.focus();
                        }
                    }
                }
            });
        </script>
    </body>
</html>
